<template>
  <div class="subject_overview">
    <div class="subject_overview_breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>当前位置</el-breadcrumb-item>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>学科概况</el-breadcrumb-item>
        <el-breadcrumb-item>{{routerName}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="subject_overview_section">
      <div class="subject_overview_list">
        <div class="children_first">{{jsondata.label}}</div>
        <div :class="routerName === item.label?'is_children_list':'children_list'" @click="handleClick(item)" v-for="(item, index) in jsondata.children"
             :key="index">
          {{item.label}}
        </div>
      </div>
      <div class="roter_view">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'index',
    data() {
      return {
        routerName: '',
        jsondata: {
          label: '学科概况',
          children: [{
            label: '学科简介',
            url: '/subjectOverview/synopsisList'
            // current
          }, {
            label: '学科现状',
            url: '/subjectOverview/situationList'
            // brief
          }, {
            label: '建设目标',
            url: '/subjectOverview/goalProgrammingList'
            // goal
          }]
        }
      }
    },
    created() {
      this.routerName = this.$route.query.routerName
    },
    methods: {
      handleClick(val) {
        console.log(val)
        this.routerName = val.label
        this.$router.push({
          path: val.url,
          query: {
            routerName: val.label
          }
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .subject_overview {
    width: 1280px;
    margin: 0 auto;

    .subject_overview_breadcrumb {
      padding: 20px;
      padding-left: 0;
    }

    .subject_overview_section {
      display: flex;
      justify-content: space-between;

      .subject_overview_list {
        border: 1px solid #F1F1F1;
        height: 225px;
        text-align: center;
        font-weight: bold;

        .children_first {
          width: 200px;
          height: 56px;
          line-height: 56px;
          background: #F1F1F1;
          color: #0A7B19;
        }

        .children_list {
          width: 200px;
          height: 56px;
          line-height: 56px;
          background: #FFFFFF;
          border-bottom: 1px solid #F1F1F1;
          cursor: pointer;
          &:hover {
            color: #0A7B19;
            background: #F4FFF6;
          }
        }
        .is_children_list {
          width: 200px;
          height: 56px;
          line-height: 56px;
          color: #0A7B19;
          background: #F4FFF6;
          border-bottom: 1px solid #F1F1F1;
          cursor: pointer;
        }
      }
    }

    .roter_view {
      width: 1060px;
    }
  }
</style>
